$def with(uid, user,  key)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title>Insert title here</title>
		<meta name="description" content="" />
		<meta name="author" content="Sunyao" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
		<link rel="stylesheet" type="text/css" href="./static/css/style.css"/>
		<link rel="stylesheet/less" type="text/css" href="./static/css/gallery.less" />
		<link rel="stylesheet" href="./static/css/datepicker.css" type="text/css" />
		<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?v=3.8&sensor=false"></script>
		<script type="text/javascript" src="./static/js/infobox.js"></script>
		<script type="text/javascript" src="./static/js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="./static/js/jquery.tmpl.min.js"></script>
		<script type="text/javascript" src="./static/js/less-1.3.0.min.js"></script>
		<script type="text/javascript" src="./static/js/base64.js"></script>
		<script type="text/javascript" src="./static/js/datepicker.js"></script>
	    <script type="text/javascript" src="./static/js/eye.js"></script>
	    <script type="text/javascript" src="./static/js/utils.js"></script>
	    <script type="text/javascript" src="./static/js/layout.js?ver=1.0.2"></script>
		<script type="text/javascript" src="./static/js/API.js"></script>
		<script type="text/javascript" src="./static/js/modernizr.custom.53451.js"></script>
		
	</head>
	<body onload="initialize();">
		<input id="key" type="hidden" value="$key" />
		<nav id="topBar">
			<canvas class="logo"></canvas>
			<div class="headtb">
				<span class="username">$user.uname</span>
				<img class="useravatar" src="$user.profile_image_url" />
				<a class="collectBtn"></a>
				<a class="myTfeetBtn"></a>
				<a class="allTfeetBtn"></a>
			</div>

		</nav>
		<div id="webcontainer">
				<div id="gallery_side" class='side_hide'></div>
				<div id="location_side" class='side_show'>
					<div id="map_canvas"></div>
					<div id="thumb_container"></div>
				</div>
		</div>
		<div id="gallery_toolbar_container"></div> 
		<script type="text/javascript">
			jQuery.noConflict();
			var map,thumbList, gallery,store;
			
			jQuery(function() {
				Tfeet.Base.prototype.key = (new Base64).decode(jQuery("#key").val().trim());
				Tfeet.Base.prototype.uid = "$uid";
				store = jQuery.extend(jQuery({}), new Tfeet.Store());
				thumbList = new Tfeet.widgets.tfeetThumbWidget({
					store : store
				});
				gallery = new Tfeet.widgets.tfeetGalleryWidget({
					store : store
				});
				
				jQuery('#topBar').find('.allTfeetBtn').click(function(){
					store.type='all';
					store.load(0,10,true);
				});
				jQuery('#topBar').find('.myTfeetBtn').click(function(){
					store.type='self';
					store.load(0,10,true);
					
				});
				jQuery('#topBar').find('.collectBtn').click(function(){
					store.type='fav';
					store.load(0,10,true);
				});
				store.load();
			});

		function initialize() {
				var latlng = new google.maps.LatLng(39.92, 116.46);
				var myOptions = {
					zoom : 8,
					center : latlng,
					disableDefaultUI : true,
					//mapTypeId : google.maps.MapTypeId.HYBRID
					//mapTypeId : google.maps.MapTypeId.SATELLITE
					mapTypeId : google.maps.MapTypeId.ROADMAP
				};
				map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
				map.setTilt(45);
				var marker = new google.maps.Marker({
					map : map,
					draggable : true,
					position : new google.maps.LatLng(49.47216, -123.76307),
					visible : true
				});

				var boxText = document.createElement("section");
				boxText.innerHTML = '<div class="infoBg"></div><div class="infoShadow"></div><article class="infoImgContainer"></article><article class="infoLocContainer"><img  src="./resource/images/infobox/foot.png"/><input type="text" class="infoLocInput" x-webkit-speech x-webkit-grammar="bUIltin:search"/></article><textarea rows="3" cols="27" class="infoRemarkArea"></textarea><div class="infoConfirmBtn"></div><div class="infofooter"></div>';

				var myOptions = {
					content : boxText,
					disableAutoPan : false,
					maxWidth : 0,
					pixelOffset : new google.maps.Size(-152, -30),
					zIndex : null,
					boxClass : "frame",
					alignBottom : true,
					closeBoxMargin : "11px 10px 0px 0px",
					closeBoxURL : "../resource/images/infobox/close.png",
					infoBoxClearance : new google.maps.Size(1, 1),
					isHidden : false,
					pane : "floatPane",
					enableEventPropagation : false
				};

				//var ib = new InfoBox(myOptions);
				//ib.open(map, marker);

			}


		</script>
	</body>
</html>